<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>可将canvas图像导出为多种格式图片的jQuery插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" href="css/layout.css" />
	<style type="text/css">
		#mainSection{min-height: 350px;}
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		
		<section id="mainSection" class="container">
			<section id="example">
				<section class="pull-left" id="canvasSection">
					<h2>这里是使用Canvas画的一张表情图片</h2>
					<canvas id="myCanvas">你的浏览器不支持Canvas属性!</canvas>
				</section>
				<aside class="btn-group pull-right" id="downloadSection">
					<button class="btn btn-primary" type="button" style="cursor: auto">选择导出图片的类型</button>
					<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">
					<span class="caret"></span>
					<span class="sr-only">Toggle Dropdown</span>
					</button>
					<ul role="menu" class="dropdown-menu" id="selectDownloadType">
						<li><a href="#downloadAsPNG" id="downloadAsPNG">PNG-Download</a></li>
						<li><a href="#downloadAsJPEG" id="downloadAsJPEG">JPEG-Download</a></li>
						<li><a href="#downloadAsBMP" id="downloadAsBMP">BMP-Download</a></li>
						<li><a href="#downloadAsBMP" id="downloadAsGIF">GIF-Download</a></li>
						<li><a href="#downloadAsBMP" id="downloadAsWEBP">WEBP-Download</a></li>
					</ul>
				</aside>
				<section style="clear:both" id="message"></section>
			</section>
		</section>
		
	</div>
	
	<script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js"></script> 
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="js/export-canvas.js"></script>
        <script>
			$("document").ready(function() {
				
				var exampleCanvasID = "myCanvas";
				/*var ctx = document.getElementById(exampleCanvasID).getContext("2d");
				ctx.fillStyle = "rgb(200,0,0)";
				ctx.fillRect (10, 10, 55, 50);
				ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
				ctx.fillRect (30, 30, 55, 50);*/
				//var a_canvas = document.getElementById('a');
				var context = document.getElementById(exampleCanvasID).getContext("2d");
				context.fillStyle = 'yellow';
				context.beginPath();
				context.arc(95, 85, 40, 0, 2 * Math.PI);
				context.closePath();
				context.fill();
				context.lineWidth = 2;
				context.stroke();
				context.fillStyle = 'black';
				context.beginPath();
				context.arc(75, 75, 5, 0, 2 * Math.PI);
				context.closePath();
				context.fill();
				context.beginPath();
				context.arc(114, 75, 5, 0, 2 * Math.PI);
				context.closePath();
				context.fill();
				context.beginPath();
				context.arc(95, 90, 26, Math.PI, 2 * Math.PI, true);
				context.closePath();
				context.fill();
				context.font = '30px Garamond';
				context.fillText('Canvas is cool', 15, 175);
								
				var exportCanvas = new ExportCanvas();
				exportCanvas.loadConfigFile("js/config/config.js");
				exportCanvas.loadLanguageFile("js/language/en.js");
				exportCanvas.setExportQuality(1.0);

				$("ul#selectDownloadType li a").click(function() {
					
					$("html, body").animate({scrollTop:$(document).height()}, 800);
					
					var getIDofSelectedDownloadType = $(this).attr("id");
					if(getIDofSelectedDownloadType == "downloadAsPNG") {
						
						exportCanvas.setMimeType("image/png");
						
					} else if(getIDofSelectedDownloadType == "downloadAsJPEG") {
						
						exportCanvas.setMimeType("image/jpeg");
						
					} else if(getIDofSelectedDownloadType == "downloadAsBMP") {
						
						exportCanvas.setMimeType("image/bmp");
						
					} else if(getIDofSelectedDownloadType == "downloadAsGIF") {
						
						exportCanvas.setMimeType("image/gif");
						
					} else if(getIDofSelectedDownloadType == "downloadAsWEBP") {
						
						exportCanvas.setMimeType("image/webp");
						
					} else {
						
						$("section#message").html('<div class="alert alert-danger" role="alert">Diese Export-Möglichkeit gibt es nicht!</div>').show(1000);	
						
					}
					
					exportCanvas.export(exampleCanvasID, function() {
						
							$("section#message").html("").css("display", "none");
							$("section#message").html('<div class="alert alert-success" role="alert">' + DOWNLOAD_HAS_STARTED + '</div>').show(1000);
						
						}, function(getLastReport) {
						
							$("section#message").html("").css("display", "none");
							$("section#message").html('<div class="alert alert-danger" role="alert">' + getLastReport + '</div>').show(1000);
						
					});
					
				});
				
				$("a#showTutorial").click(function() {
				   $("html, body").animate({scrollTop:$(document).height()}, 800);
				   $.ajax({
						url : "example/example.txt",
						dataType: "text",
						success : function (data) {
							$("section#tutorial").css("display", "none");
							$("section#tutorial").html('<h2>HTML-Einbindung (HEAD)</h2><code>&#x3C;script src=&#x22;PFAD_ZUR_BIBLIOTHEK/core/export-canvas.js&#x22;&#x3E;&#x3C;/script&#x3E;</code><br /><h2>HTML-Einbindung (BODY)</h2><code>&#x3C;canvas id=&#x22;myCanvas&#x22;&#x3E;Ihr Browser unterstützt das Canvas-Objekt nicht!&#x3C;/canvas&#x3E;</code><br /><h2>Javascript-Einbindung</h2><br /><code>' + data + '</code>');
							$("section#tutorial").slideDown(1000);
						},
						error : function() {
							alert("Konnte die Ajax-Anfrage lokal nicht durchführen! Am Besten mit Firefox öffnen um die Anleitung zu sehen! Das Bibliothek sollte in allen Browsern funktioneren!");
						}
					});
				});
				
			});
        </script>
</body>
</html>